<template>
  <div>
    <header>
      <i @click="goBack()">
        <span class="icon-back"></span>
      </i>
      <span>挂起订单</span>
    </header>
    <div class="lists-container">
      <div class="lists-wrapper">
        <div class="user-list"
             v-show="list.length">
          <van-list v-model="loading"
                    :finished="finished"
                    :error.sync="error"
                    error-text="请求失败，点击重新加载"
                    finished-text=""
                    @load="onLoad">
            <div class="order-box"
                 v-for="(listsItem,index) in list"
                 :key="index">
              <div class="dhs-virtual-icon"
                   v-if="listsItem.is_dhs_virtual==1"></div>
              <!-- 上面部分 -->
              <section class="order-list-info clearfix">
                <a href = "javascript;">
                  <span class="fl">
                    <p>订单：{{listsItem.order_no}}
                    </p>
                    <p>手机号：{{listsItem.mobile}}</p>
                    <p>下单人：{{listsItem.name || "-"}}</p>
                    <p>截止时间：{{listsItem.end_time || "-"}}</p>
                    <p>收货人姓名：{{listsItem.receiver_name || "-"}}</p>
                    <p>收货人手机：{{listsItem.receiver_mobile || "-"}}</p>
                    <p>收货地址：{{listsItem.receiver_address || "-"}}</p>
                  </span>
                  <span v-if="listsItem.status==3"
                        class="status fr completed"></span>
                  <span v-else-if="listsItem.status==4"
                        class="status fr orderClose"></span>
                  <span v-else
                        class="status fr"
                        :class="listsItem.is_presale?'red':''">{{listsItem.status_name}}</span>
                </a>
              </section>
              <!-- 中间部分 -->
              <section class="order-goods">
                <ul>
                  <li class="goods-li"
                      v-for='(subItem,idx) in listsItem.item_list'
                      :key="idx">
                    <section class="order-goods-img">
                      <img :src="subItem.pic_url.img_path"
                           width="80"
                           height="80" />
                    </section>
                    <section class="order-goods-infor">
                      <p class="goods-title"
                         >{{subItem.item_title}}</p>
                      <p class="goods-props"
                         v-if="subItem.props">{{subItem.props}}</p>
                      <section class="goods-price-num fontGilroy clearfix">
                        <p class="price fl">
                          <em>{{subItem.sku_name}}</em></p>
                        <span class="num fr"><i>x</i>{{subItem.num}}</span>
                      </section>
                    
                    </section>
                  
                  </li>
                </ul>
              </section>
              
              <section class="order-pay">
                <div class="good-price-box">
                  <span v-if="false">
                    商品总价：<span class="good-total-price fontGilroy"
                               v-if="listsItem.pay_type && listsItem.pay_type==5"><i>&dollar;</i><em>{{listsItem.total_fee}}</em></span><span class="good-total-price fontGilroy"
                                                                                                                                              v-else><i>&yen;</i><em>{{listsItem.total_fee}}</em></span>
                  </span>
                  <a v-if="dzData.is_ltsn">
                    <a @click="handleClickEvent(listsItem)" class="btn orange-btn">一键代发</a>
                    <a @click="handleClickSelfDeliver(listsItem)" class="btn orange-btn">自发货</a>
                  </a>
                  <a v-else @click="handleClickEvent(listsItem)" class="btn orange-btn">处理</a>
                </div>
              </section>
            </div>
          </van-list>
        </div>
        <div class="no-data"
             v-show="!list.length && finished">
          <no-data :noData="noData"></no-data>
        </div>
      </div>
    </div>
    <van-popup
      v-model="showPop"
      class="popBox">
      <van-form @submit="onSubmit">
        <van-field
          @click="showExpress = true"
          readonly
          clickable
          v-model="formData.express_name"
          name="物流公司"
          label="物流公司"
          placeholder="物流公司"
          :rules="[{ required: true, message: '请选择物流公司' }]"
        />
        <van-field
          v-model="formData.express_no"
          name="物流单号"
          label="物流单号"
          placeholder="写物流单号"
          :rules="[{ required: true, message: '请填写物流单号' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            发货
          </van-button>
        </div>
      </van-form>
    </van-popup>
    <van-action-sheet v-model="showExpress" :actions="expressList" @select="onSelect" />
  </div>
</template>

<script>
  import Vue from 'vue'
  import { ActionSheet, Popup, Form, Field } from 'vant'
  Vue.use(ActionSheet)
  Vue.use(Popup)
  Vue.use(Form)
  Vue.use(Field)
  
  import small from '@/smallapp/small'
  import noData from '@/components/noData/index'
  const noOrderImg = 'https://img.wifenxiao.com/h5-wfx/images/no_order.png'
  import Scroll from '@/components/scroll/index'
  import { dhsHangOrders, dhsHandleHangOrder, getExpressList, dhsSendOrder } from '@/api/dz/dzApi'
  
  export default Vue.extend({
    name: 'index',
    components: {
      Scroll,
      noData
    },
    data() {
      return {
        showPop: false,
        showExpress: false,
        formData: {
          order_id: '',
          express: '',
          express_no: '',
          express_name: ''
        },
        expressList: [], // 物流列表
        noData: {
          width: '184px',
          txtMarginTop: '-30px',
          img: noOrderImg,
          text: '暂无订单',
          marginTop: '120px'
        },
        p: 2,
        loading: false,
        finished: false,
        error: false,
        list: [],
        dzData: {
          is_ltsn: false
        }
      }
    },
    created() {
      // 初始数据
      this.init()
      let shop = small.globalData.shopId
      const ltsn_dz = this.$_shop('$_ltsn_dz', shop)
      this.dzData.is_ltsn = ltsn_dz
    },
    methods: {
      // 获取物流信息
      getExpressListFn() {
        getExpressList().then(res => {
          if (res.status == 1) {
            this.expressList = res.data
          }
        })
      },
      // 选择物流
      onSelect(item) {
        // 默认情况下点击选项时不会自动收起
        // 可以通过 close-on-click-action 属性开启自动收起
        this.showExpress = false
        this.formData.express = item.id
        this.formData.express_name = item.name
      },
      // 处理按钮
      handleClickEvent(data) {
        dhsHandleHangOrder({
          id: data.id
        }).then(res => {
          if (res.status == 1) {
            this.$Error('处理成功')
            this.init()
          } else {
            this.$Error(res.msg)
          }
        })
      },
      // 自发货按钮
      handleClickSelfDeliver(item) {
        this.showPop = true
        this.formData.order_id = item.order_id
      },
      // 发货接口
      onSubmit() {
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 10000)
        const data = Object.assign({}, this.formData, true)
        dhsSendOrder(data).then(res => {
          this.showPop = false
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.init()
            this.$Error(res.msg)
          } else {
            this.$Error(res.msg)
          }
        })
      },
      init() {
        this.$loadingWrap.show()
        dhsHangOrders().then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.list = res.list // 全部订单
            // 其它
            if (!this.list.length || this.list.length < 10) {
              this.finished = true
            }
          } else {
            this.$Error(res.msg)
          }
        })
         this.getExpressListFn()
      },
      // 加载更多
      onLoad() {
        const data = {
          p: this.p
        }
        dhsHangOrders(data)
          .then(res => {
            this.loading = false
            if (res.list.length) {
              this.list = this.list.concat(res.list)
              this.p++
            }
            if (res.list.length < 10) {
              this.finished = true
            }
          })
          .catch(() => {
            this.error = true
          })
      },
      goBack() {
          wx.navigateBack({
            delta: 1
          })
      }
    },
    mounted() {
    // 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        this.onLoad()
      })
  }
  })
</script>

<style lang="scss">
  @import "src/styles/variables";
  @import "src/styles/order/lists";
  header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 88px;
    line-height: 88px;
    background: $default;
    text-align: center;
    font-size: 32px;
    color: #4b4b4b;
    i {
      display: block;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 66px;
      height: 100%;
    }
  }
  .lists-container .order-goods .goods-title {
    @include lineClamp(24px, 1.4, 1);
  }
  .popBox{
    width: 80vw;
    padding: 40px;
    border-radius: 40px;
  }
  .good-price-box{
    .btn{
      display: inline-block;
      height: 50px;
      line-height: 50px;
      border-radius: 40px;
      padding: 0 30px;
      font-size: 24px;
      text-align: center;
      border: 2px solid #FD2049;
      color: #FD2049;
      background: #fff;
    }
  }
  .icon-back{
    border: solid #666;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 8px;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
  }
</style>
